﻿/*

            This file is part of the mojomo modular front end design framework for mojoPortal CMS; 
            find more at mojomo.co.uk or mojomo.codeplex.com	

Name:       modules.css

Author:     freshangle.co.uk

Version:    1.0

Purpose:    Any modules that you develop can be left here.
    
            examples and references :
    
            Based on @stubbornella’s media object: 
            stubbornella.org/content/2010/06/25/the-media-object-saves-hundreds-of-lines-of-code/
    
            <a class="media promo">
            <img src=product.jpg alt="" class=img>
            <p class=body>Get Product for half price!</p>
            </a>
    
            .media { display: block; }
            .media .img { float: left; margin-right: 10px; 
            .media .body { overflow: hidden; margin-bottom: 0; }
    
    
            Use a class of .island whenever you want to box off an area of content as per: 
            csswizardry.com/2011/10/the-island-object/. Extend with classes like .promo 
            to apply different colours etc to draw attention.

            .island { padding: 1.5em; }
            .island > :last-child { margin-bottom: 0; }



*/	


        /* Defining a grid based module, see also 'grid.css' */
        
        
        /*This is just an example for putting three boxes in a row within a content area. 
        Create 3 mojoPortal HTML content modules and give each a class of 'g1' under
        Html Content Settings/Miscellaneous/Custom CSS Class...*/

        /*1px line between three, first child border hidden in ie when its same color as the background, 
          or until I get pseudo selectors working in ie...!  */
        
        .g1, .g2, .g3 { border-left: 1px solid #F7F7F7; margin: 0 -1px 0 0 }
        .g1:first-child, .g2:first-child, .g3:first-child   { border: none; margin: 0 0 0 0 } 
        
        .ie7 .g1,.ie7 .g2,.ie7 .g3,.ie6 .g1,.ie6 .g2,.ie6 .g3 {  margin: 0 0 0 -1px}        
		.g1, .g2, .g3 {background-color: #808080 }	
        .g1 h3, .g2 h3, .g3 h3  { color: #FFFFFF }
        
        
        /* MOBILE */
        @media only screen and (min-width: 0px)	 {
    
     	 .g1, .g2, .g3 { border-left:none; margin: 0 }
          
        }
         /* MOBILE LANDSCAPE*/
       @media only screen and (min-width: 480px)	 {
    
     	 .g1, .g2, .g3 { border-left: 1px solid #F7F7F7; margin: 0 -1px 0 0 }
          
        }
        